<template>
<div style="margin-bottom: 40px">
  <el-row>
    <el-col :span="1.5"><div style="padding-top: 10px;font-size: 14px">签署信息：</div></el-col>
    <el-col :span="8">
      <el-input
          size="large" placeholder="搜索签署信息、发起人/参与人姓名" @keyup.enter="searchSign" v-model="content">
      </el-input>
    </el-col>
    <el-col :span="2">
      <el-button type="primary" icon="Search" size="large" @click="searchSign" style="margin-left: 10px">搜索</el-button>
    </el-col>
  </el-row>
  <br/>
  <el-table
      :data="tableData"
      header-align="center"
      v-loading="loading"
      element-loading-svg-view-box="-10, -10, 50, 50"
      >
    <el-table-column width="30px"></el-table-column>
    <el-table-column label="文件名称" prop="signName">
      <template #default="scope">
        <div class="filename" @click="getDetail(scope.index,scope.row)">{{scope.row.signName}}</div>
        <div class="sponsor">发起人：{{scope.row.signSponsor}}</div>
      </template>
    </el-table-column>

    <el-table-column label="时间" width="270px">
      <template #default="scope">
        <div>
          <img src="../../../img/img_1.png" style="width: 15px;height: 15px;margin: 4px 6px 0 0;display: inline-block">
          <div style="display: inline-block">{{scope.row.signStartTime}}</div>
        </div>
        <div v-show="scope.row.signEndTime !== null">
          <img src="../../../img/img_2.png" style="width: 15px;height: 15px;margin: 4px 6px 0 0;display: inline-block">
          <div style="display: inline-block">{{scope.row.signEndTime}}</div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="参与人" prop="signParticipant" width="220px">
      <template #default="scope">
        <div v-for="item in scope.row.sealSigner">
          <img v-if="item.signerSignStatus !== 2" src="../../../img/time.png" style="width: 11px;height: 11px;margin: 6px 5px 0 0;display: inline-block">
          <img v-else src="../../../img/sign_finish.svg" style="width: 14px;height: 14px;margin: 6px 2px 0 0;display: inline-block">
          <div style="display: inline-block">{{item.signerId}}</div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="状态" width="150px"  align="center">
      <template #default="scope">
        <div v-if="scope.row.signStatus === 1">
          <span class="status_icon" style="background-color: #EA1B29"></span><span>已过期</span>
        </div>
        <div v-if="scope.row.signStatus === 2">
          <span class="status_icon" style="background-color: #cccccc"></span><span>已撤销</span>
        </div>
        <div v-if="scope.row.signStatus === 3">
          <span class="status_icon" style="background-color: #5596f4"></span><span>进行中</span>
        </div>
        <div v-if="scope.row.signStatus === 4">
          <span class="status_icon" style="background-color: #0CB618"></span><span>已完成</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="180px">
      <template #default="scope">
        <el-button type="text" @click="getDetail(scope.index,scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br/>
  <el-pagination
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="position: absolute;bottom: 0; right: 20px;left: auto"
  >
  </el-pagination>

</div>
</template>

<script setup>
import {computed, ref,getCurrentInstance} from 'vue';
import {
  getReceiveSignApi,
  getReceiveSignNumApi,
  getSealSignBySearchParticipantApi,
  getSealSignNumBySearchParticipantApi,
} from '../../../api/sign';
//import store from '../../../store';
import { useStore } from 'vuex'
import {dateFormat, transformTime} from '../../../utils/util';
import {ElMessage} from 'element-plus';
import {validatenull} from '../../../utils/validate';
const {proxy} = getCurrentInstance()
//分页代码
const totalNum = ref(0)
const currentPage=ref(1)
const pageSize=ref(5)

const handleCurrentChange = (currPage) => {
  currentPage.value = currPage
  if(validatenull(content)){
    getReceiveSign()
  }else {
    searchSign()
  }
  window.scrollTo(0, 175);
}

const handleSizeChange = (val) => {
  pageSize.value=val
  if(validatenull(content)){
    getReceiveSign()
  }else {
    searchSign()
  }
}

const loading = ref(false)
const tableData = ref([])
const store = useStore()
const signParticipant =  store.getters.userId

/**
 * 获取收到的签署文件
 */
const getReceiveSign = () => {
  loading.value = true
  getReceiveSignApi(currentPage.value,pageSize.value,signParticipant)
  .then(res=>{
    let data = res.data.result
    for (let i=0; i<data.length; i++){
      let startTime = new Date(data[i].signStartTime)
      data[i].signStartTime = dateFormat("YYYY-mm-dd HH:MM:SS", startTime)
      if(data[i].signEndTime !== null){
        let endTime = new Date(data[i].signEndTime)
        data[i].signEndTime = dateFormat("YYYY-mm-dd HH:MM:SS", endTime)
      }
    }
    tableData.value = data
    loading.value = false
  })
}
getReceiveSign()

/**
 * 获取收到的签署文件数量
 */
const getReceiveSignNum = () => {
  getReceiveSignNumApi(signParticipant)
  .then(res=>{
    let data = res.data.result
    totalNum.value = data
  })
}
getReceiveSignNum()

/**
 * 搜索签署文件信息
 */
const content = ref("")
const searchSign = () => {
  loading.value = true
  getSealSignBySearchParticipantApi(currentPage.value,pageSize.value,signParticipant,content.value)
  .then(res=>{
    let data = res.data.result
    for (let i=0; i<data.length; i++){
      let startTime = new Date(data[i].signStartTime)
      data[i].signStartTime = dateFormat("YYYY-mm-dd HH:MM:SS", startTime)
      if(data[i].signEndTime !== null){
        let endTime = new Date(data[i].signEndTime)
        data[i].signEndTime = dateFormat("YYYY-mm-dd HH:MM:SS", endTime)
      }
    }
    getSearchNum()
    tableData.value = data
    loading.value = false
    }).catch(res=>{
      ElMessage.error(res.data.error)
   })
}
/**
 * 获取搜索到的任务数量
 */
const getSearchNum = () => {
  getSealSignNumBySearchParticipantApi(signParticipant,content.value)
  .then(res=>{
    let data = res.data.result
    totalNum.value = data
    }).catch(res=>{
      ElMessage.error(res.data.error)
   })
}

/**
 * 跳转到签署文件的详情页
 * @param index
 * @param row
 */
const getDetail = (index,row) => {
  proxy.$router.push({
    path:'/sign/seal-anti',
    query:{
      signId: row.signId
    }
  })
}

</script>

<style scoped>

/deep/ .el-table th{
  border-bottom: 1px solid #e4e4e4!important;
}
/deep/ .el-table__header-wrapper th{
  background: rgb(247, 248, 250);
  color: rgb(28, 28, 28);
}
/deep/ .el-table__cell{
  padding: 15px 0;
}
.filename{
  height: 20px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 20px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.sponsor{
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
}
.status_icon{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin-right: 6px;
}
/deep/ .el-button--text{
  color: #1063f1;
  font-weight: 500;
  font-family: 微雅软黑,Arial;
}
/deep/ .el-pagination{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%;
  padding-top: 20px;
  padding-right: 23px;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
